---
title: 'next-themes'
tags: 'nextjs,tailwindcss'
description: 'Next themes library configuration for dark mode with tailwindcss'
---

## Installation

Library from [next-themes](https://github.com/pacocoursey/next-themes)

```bash
yarn add next-themes
```

---

### \_app.js

```js
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute='class' defaultTheme='system'>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;
```

### Set on button (Nav.jsx)

```jsx
import { useTheme } from 'next-themes';
import { FiSun, FiMoon } from 'react-icons/fi';

export default function Nav() {
  const { theme, setTheme } = useTheme();
  <button
    className='border-thin dark:hover:border-accent-200 dark:hover:text-accent-200 hover:border-accent-200 hover:text-accent-200 rounded-md p-2.5 focus:outline-none'
    onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
  >
    {theme === 'light' ? <FiMoon size={20} /> : <FiSun size={20} />}
  </button>;
}
```

### Extend tailwind.config.js

```js
module.exports = {
  purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        accent: {
          100: '#DBFF00',
          200: '#00FF94',
          300: '#00E0F3',
        },
      },
    },
  },
};
```
